<template>
  <div>
    <div>
      <button @click="get_sid()">刷新</button>
      <ul>
        <li  v-for="item,index in channels">
            <p>问题单号：{{item.sid}}
              
            <p v-if="item.replyer==username" ><button @click="Reply(item)">进入回复</button>受理人：{{item.replyer}}</p>
            <p v-else-if="item.is_reply" ><button @click="Reply(item)" disabled >已回复</button>受理人：{{item.replyer}}</p>
            <p v-else><button @click="Reply(item)" >回复</button></p>
            </p> 
        </li>
      </ul> 
    </div>
    <div class="talkbox">
      <div style="border: 1px black solid;height:300px;background-color: white;overflow-y:auto;width:600px;">
          <div>
          <p v-for="item in log_list" >
            <!-- {{item}} -->
              <span v-html='$options.filters.make_text(item)'></span>
          </p>
          </div>
      </div>
	    <input v-model="msg" />

      <!-- <button @click="send">发送消息</button> -->
      <button @click="on_room_send">发送消息</button>
        <!-- <div style="border: 1px red solid;position: fixed;right:35%;top: 90px;">
          <iframe id='frame1'  frameborder=0 width=501 height=576  scrolling=no src="http://localhost:8080/scoket_message" marginheight=0 marginwidth=0></iframe>
        </div> -->
  </div>
</div>
  
</template>


 
<script>

import axios from 'axios'
export default {
  data () {
    return {
	  msg: "",
    log_list:[],
    channels:[],
    username:sessionStorage.getItem('username'),
    sid:'',
    }
  },
  //注册组件标签
  components:{


  },
  filters:{
    make_text(val){
      if(val.indexOf('客服'+sessionStorage.getItem('username'))!= -1){
        return '<span class="centerstr">'+val+'</span>'
      }else if(val.indexOf(sessionStorage.getItem('username'))!= -1){
        return '<span class="rightstr">'+val+'</span>'
      }else{
         return '<span>'+val+'</span>'
      }
    }
  },
  sockets:{
    connect: function(){
      console.log('socket 连接成功')
    },

    message: function(val){
      console.log('返回:'+val);
      this.log_list.push(val);

      this.$dialog.alert({
        message: val,
      }).then(res => {
        console.log(res)
        // on close
      });
    },

    
},
  mounted:function(){

  	
},
created(){
  this.get_sid()
},
  methods:{
    Reply(channel){
      console.log(channel.sid)
      axios.get('http://127.0.0.1:5000/get_channel_info/',{
        params:{'sid':channel.sid,'username':this.username}
      }).then(res=>{
        console.log(res.data)
        this.log_list = channel.msg
        this.sid = channel.sid
        this.join_room(channel.sid)
      })
      
    },
	send(){
      this.$socket.emit('message',encodeURI(this.username+":"+this.msg));
      this.msg = ''
    },
  get_sid(){
    axios.get('http://127.0.0.1:5000/customer_ser/').then(res=>{
        console.log(res.data)
        this.channels = res.data.channels
    })
  },
  join_room(sid){
    this.sid=sid
    this.$socket.emit('join',encodeURI(JSON.stringify({username:this.username,room:sid})));
  },
  on_room_send(){
      this.$socket.emit('onroom',encodeURI(this.username+"："+this.msg),this.sid);
      this.msg = ''
  } 
  }
}


</script>
 
<style>

.centerstr{
  text-align: center;
  
  margin-left: 240px;
}
.talkbox{
  position: fixed;
  right: 500px;
  top:30px;
}
</style>